<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<audio autoplay="autoplay" src="mp3/时间都去哪了—张碧晨.mp3">
			</audio>		
		<canvas id ="myCanvas" width="1350" height="630"></canvas>
		<script type="text/javascript">
        
			var numbers = [
			[
			[0,0,1,1,1,1,0,0],
			[0,1,1,1,1,1,1,0],
			[1,1,1,0,0,1,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,0,0,1,1,1],
			[0,1,1,1,1,1,1,0],			
			[0,0,1,1,1,1,0,0],
	      ],
	      [
			[0,0,0,1,1,0,0,0],
			[0,0,1,1,1,1,0,0],
			[0,1,1,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[0,0,0,1,1,1,0,0],
			[1,1,1,1,1,1,1,1],			
			[1,1,1,1,1,1,1,1],
	      ],
	      [
			[0,0,1,1,1,1,0,0],
			[0,1,1,1,1,1,1,0],
			[1,1,0,0,0,0,1,1],
			[1,0,0,0,0,0,1,1],
			[0,0,0,0,0,0,1,1],
			[0,0,0,0,0,1,1,0],
			[0,0,0,0,1,1,0,0],
			[0,0,0,1,1,0,0,0],
			[0,0,1,1,0,0,0,0],
			[0,1,1,0,0,0,0,0],
			[1,1,1,0,0,0,0,1],
			[1,1,1,1,1,1,1,1],			
			[1,1,1,1,1,1,1,1],
	      ],
	      [
			[0,0,1,1,1,1,0,0],
			[0,1,1,1,1,1,1,0],
			[1,1,0,0,0,0,1,1],
			[0,0,0,0,0,0,1,1],
			[0,0,0,0,0,1,1,1],
			[0,0,0,0,1,1,1,0],
			[0,1,1,1,1,1,0,0],
			[0,1,1,1,1,1,1,0],
			[0,0,0,0,0,1,1,1],
			[0,0,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],			
			[0,1,1,1,1,1,1,0],
			[0,0,1,1,1,1,0,0],
	      ],
	      [
			[0,1,0,0,0,0,1,0],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,1,1,1,1,1],
			[1,1,1,1,1,1,1,1],
			[0,0,0,0,0,0,1,1],
			[0,0,0,0,0,0,1,1],
			[0,0,0,0,0,0,1,1],
			[0,0,0,0,0,0,1,1],			
			[0,0,0,0,0,0,1,1],
			[0,0,0,0,0,0,1,1],
	      ],
	      [
			[1,1,1,1,1,1,1,1],
			[1,1,1,1,1,1,1,1],
			[1,1,0,0,0,0,0,0],
			[1,1,0,0,0,0,0,0],
			[1,1,0,0,0,0,0,0],
			[1,1,1,1,1,1,1,0],
			[1,1,1,1,1,1,1,1],
			[1,1,0,0,0,1,1,1],
			[0,0,0,0,0,0,1,1],
			[0,0,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],			
			[0,1,1,1,1,1,1,0],
			[0,0,1,1,1,1,0,0],
	      ],
	      [
			[0,0,1,1,1,1,1,0],
			[0,1,1,1,1,1,1,1],
			[1,1,1,0,0,0,1,1],
			[1,1,0,0,0,0,0,0],
			[1,1,0,0,0,0,0,0],
			[1,1,1,1,1,1,1,0],
			[1,1,1,1,1,1,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,0,0,1,1,1],
			[0,1,1,1,1,1,1,0],			
			[0,0,1,1,1,1,0,0],
	      ],
	      [
	        [1,1,1,1,1,1,1,1],
	        [1,1,1,1,1,1,1,1],
	        [1,1,0,0,0,0,1,1],
	        [1,0,0,0,0,0,1,1],
	        [0,0,0,0,0,0,1,1],
	        [0,0,0,0,0,1,1,0],
	        [0,0,0,0,0,1,1,0],
	        [0,0,0,0,1,1,0,0],
	        [0,0,0,0,1,1,0,0],
	        [0,0,0,1,1,0,0,0],
	        [0,0,0,1,1,0,0,0],
	        [0,0,1,1,0,0,0,0],
	        [0,0,1,1,0,0,0,0],	        
	      ],
	      [
	        [0,0,1,1,1,1,0,0],
			[0,1,1,1,1,1,1,0],
			[1,1,1,0,0,1,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,0,0,1,1,1],
			[0,1,1,1,1,1,1,0],
			[0,1,1,1,1,1,1,0],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,0,0,1,1,1],
			[0,1,1,1,1,1,1,0],			
			[0,0,1,1,1,1,0,0],
	      ],
	      [
	        [0,0,1,1,1,1,0,0],
			[0,1,1,1,1,1,1,0],
			[1,1,1,0,0,1,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,0,0,1,1,1],
			[1,1,1,1,1,1,1,1],
			[0,0,1,1,1,1,1,1],
			[0,0,0,0,0,0,1,1],
			[1,1,0,0,0,0,1,1],
			[1,1,1,0,0,1,1,1],
			[0,1,1,1,1,1,1,0],			
			[0,0,1,1,1,1,0,0],
	      ],
	      [
				[0, 0, 0, 0],
				[0, 0, 0, 0],
				[0, 1, 1, 0],
				[0, 1, 1, 0],
				[0, 0, 0, 0],
				[0, 0, 0, 0],
				[0, 1, 1, 0],
				[0, 1, 1, 0],
				[0, 0, 0, 0],
				[0, 0, 0, 0]
			] //冒号:10
	    ];
	        var canvas = document.getElementById("myCanvas");
		    var ctx = canvas.getContext("2d"); 
		     var text = [0, 0, 10, 0, 0, 10, 0, 0];
            // 画背景
            var img = new Image();
            img.src = "img/红枫树.jpg";            
            var date = new Date();/**打印时间**/
            var balls = [];
            var temp = "";
            img.onload = function(){	        
                setInterval(function(){
            	    ctx.clearRect(0,0,canvas.width,canvas.height);
            	    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            	    
            	    var time = new Date();
            	    if(time.getSeconds() != date.getSeconds()){           	    	
            	       //判断秒数个位变还是十位变
            	       var gw = date.getSeconds() % 10;
            	       addBall(520, 0, gw);
            	       var sw1 = parseInt(date.getSeconds() / 10);
            	       var sw2 = parseInt(time.getSeconds() / 10);
                       if(sw1 != sw2){
                       	  addBall(440, 0, sw1);
                       }
            	        /**添加小球**/
            	       /**秒数改变**/
            	       date = time;  
            	      }            	                   	       
            	   
                    //打印 改变以后的时间
                    text[0] = parseInt(date.getHours() / 10);
            	    text[1] = date.getHours() % 10;
            	    text[3] = parseInt(date.getMinutes() / 10);
            	    text[4] = date.getMinutes() % 10;
                    text[6] = parseInt(date.getSeconds() / 10);
            	    text[7] = date.getSeconds() % 10;
            	    
                     //调整冒号位置
                    for(var i = 0; i < text.length; i++) {

                	if(i > 2 &&i<=5) {
						drawNumber(i*80 + 5-40, 10, text[i]);
					} else if(i>5){
						drawNumber(i*80 + 5-40-40, 10, text[i]);
					}else{
						drawNumber(i * 80 + 5, 10, text[i]);
					}
              }
                //打印小球
                drawBalls();
			}, 33);
		};
            
            function addBall(ballX1, ballY1, number){
	                	
	            for(var i = 0; i < numbers[number].length; i++){
	                		var t1 = i * 10;
	                for(var k = 0; k < numbers[number][i].length; k++){
	                		var l1 = k * 10;
	                		console.log(ballX1);
	                        if(numbers[number][i][k] == 1){
	                               	      	
	                    var vx = (Math.random() * 5) + 5;
            	        if(Math.random() > 0.5){
            	       	     vx = -vx;
            	       } 
            	        var vy = (Math.random() * 10) + 5;
            	        if(Math.random() > 0.5){
            	       	     vy = -vy;
            	       }            	                                 	      
						var r = parseInt(Math.random() * 256);
						var g = parseInt(Math.random() * 256);
						var b = parseInt(Math.random() * 256);
						var color = "rgba(" + r + "," + g + "," + b + ",0.6)";
						
					    balls.push([ballX1 + l1, ballY1 + t1, 5, vx, vy, color])
					   }    	                
	                }
	            }
               }    
        	 function drawBalls(){       	
        	for(var i = 0; i < balls.length; i++) {
        		ctx.beginPath();
        		ctx.fillStyle = balls[i][5];
        		ctx.arc(balls[i][0],balls[i][1],balls[i][2],0,2*Math.PI);
        		ctx.fill();
        		balls[i][0] = balls[i][0] + balls[i][3];
        		balls[i][1] = balls[i][1] + balls[i][4];
        		balls[i][4] = balls[i][4] + 3;
        		if(balls[i][1] > canvas.height - balls[i][2]) {
				   balls[i][1] = canvas.height - balls[i][2];
				   balls[i][4] = -balls[i][4] * 0.7;


					}

           }
        }	
        	
			function drawNumber(arcX, arcY, num) {
				var number1 = numbers[num];
			    var R = 5;
//			颜色随机
			var r = parseInt(Math.random() * 256);
			var g = parseInt(Math.random() * 256);
            var b = parseInt(Math.random() * 256);
			ctx.fillStyle = temp;
			    for(var i = 0; i < number1.length; i++) {
				   var y = arcY + 2* R * i;
				for(var k = 0; k < number1[i].length; k++) {
                    if(number1[i][k] == 1){
                    	ctx.beginPath();
                        var x = arcX + 2* R * k +30;
                        ctx.arc(x, y, R, 0, 2 * Math.PI);
                   	    ctx.fill();
                   }
                }				
			}
		}    
		</script>	
	</body>
</html>